<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .work {
            width: 800px;
            background-color: #eee;
            padding: 20px 40px;
            line-height: 24px;
        }

        .work h3 {
            border-left: 4px solid #000;
            padding-left: 10px;

            line-height: 14px;
            margin-bottom: 10px;
        }


        .chat {
            width: 250px;
            background-color: #ff0;
        }

        .chat img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .chat dd {
            margin-top: 10px;
        }

        .chat p {
            float: right;
            width: 160px;
            border: 1px solid #000;
            border-radius: 6px;
            margin-right: 10px;
            padding: 5px;

            /* 最小高度 */
            min-height: 24px;
        }
    </style>
</head>

<body>

    <!-- 

        1 一般网站内页大部分地方都需要做到高度自适应
            不写高度
            height:auto 

        2 内页的大段文字部分主要是以p标签为主

        3 清除浮动   ----  在浮动元素的父元素上面写clearfix

     -->

    <div class="work">
        <h3>岗位职责</h3>
        <p>1 嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻</p>
        <p>2 洒洒水所所所所所所所所洒洒水所所所所所所所所所所所所所所所所洒洒水所所所所所所所所所所所所所所所所洒洒水所所所所所所所所所所所所所所所所洒洒水所所所所所所所所所所所所所所所所洒洒水所所所所所所所所所所所所所所所所洒洒水所所所所所所所所所所所所所所所所所所所所所所所所
        </p>
    </div>


    <dl class="chat">
        <dt>13:33</dt>
        <dd class="clearfix">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                alt="">
            <p>聊天的内容</p>
        </dd>
        <dd class="clearfix">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                alt="">
            <p>聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
        </dd>
        <dd class="clearfix">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                alt="">
            <p>聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
        </dd>
        <dd class="clearfix">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
                alt="">
            <p></p>
        </dd>
    </dl>

</body>

</html>